<template>
  <div class="app-container">
    <div v-show="!modifyInfo.visible">
      <!-- 条件栏 -->
      <PageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      >
      </PageFilter>

      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        v-model:query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
      >
      </TableContainer>
    </div>

    <modify
      v-if="modifyInfo.visible"
      :title="modifyInfo.title"
      v-model:visible="modifyInfo.visible"
      :id="modifyInfo.id"
      :type="modifyInfo.type"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup name="customizeAdjust">
import { getCustomizeAdjustPage } from '@/api/customize.js'
import Modify from './modify'
const { proxy } = getCurrentInstance()
const modifyInfo = ref({
  visible: false,
  title: '',
  id: '',
  type: '',
})
// 过滤相关配置
const filterInfo = ref({
  flag: 'outside',
  query: {
    sort: 'create_time desc',
  },
  list: [
    {
      type: 'button',
      label: '新增',
      btType: 'primary',
      event: insert,
      show: proxy.$permission('customizeAdjust:add'),
    },
    {
      type: 'input',
      label: '变更字段',
      value: 'fieldNameLike',
      event: search,
    },
    {
      type: 'select-model',
      label: '变更属性',
      multiple: true,
      value: 'adjustTypeMult',
      code: 'customize_adjust_type',
      event: search,
    },
    {
      type: 'button',
      label: '搜索',
      btType: 'primary',
      event: search,
      show: true,
    },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: undefined,
  selections: [],
  fieldList: [
    { label: '变更字段', value: 'fieldName' },
    { label: '变更属性', value: 'adjustTypeValue' },
    { label: '变更值', value: 'value' },
    { label: '变更时间', value: 'adjustTime' },
  ],
})
function returnModify() {
  getList()
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}

function search() {
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}

//打开新增弹窗
function insert() {
  modifyInfo.value.type = 'create'
  modifyInfo.value.title = '新增'
  modifyInfo.value.visible = true
}

onMounted(() => {
  tableInfo.value.api = getCustomizeAdjustPage
  getList()
})
</script>

<style>
.org-dialog .el-dialog .el-dialog__body {
  /* height: 355px !important; */
  display: flex;
  flex-direction: column;
}
</style>
